<script lang="ts" setup>
import { useBuyStore } from "@/store/buy"
import Type from "@/components/shop/Type.vue"
import defaultImgSrc from "@/assets/images/shop.png"
import Code from "@/components/shop/Code.vue"

const store = useBuyStore()

const handleImgError = (e: any) => {
  e.target.src = defaultImgSrc
}
</script>

<template>
  <t-row class="container">
    <t-col v-for="(item, index) in store.shopInformation" :key="index" :lg="3" :md="4" :sm="6" :xl="3" :xs="12">
      <t-card class="card" header-bordered hover-shadow>
        <t-space direction="vertical" class="inner">
          <t-row class="header">
            <img alt="" :src="item.img" @error=handleImgError />
          </t-row>
          <t-row class="main">
            <t-col class="title" :span="12">
              <span> ￥&nbsp;{{ item.price }}</span>
              <span>{{ item.name }}</span>
            </t-col>
            <t-col class="desc" :span="12">
              <p>{{ item.description }}</p>
            </t-col>
          </t-row>
          <t-row class="footer">
            <t-button block variant="base" @click="store.buyAuthorization(item)">购买授权</t-button>
          </t-row>
        </t-space>
      </t-card>
    </t-col>
  </t-row>
  <Type />
  <Code />

</template>

<style lang="less" scoped>
.container {
  margin: 50px 0;
  padding: 10px;

  .card {
    margin: 20px;

    .inner {
      width: 100%;

      .header {
        height: 160px;

        img {
          width: 100%;
          height: 100%;
        }

      }

      .main {
        height: 100px;
        padding: 0 4px;

        .title {
          height: 20px;
          width: 100%;
          font-weight: bolder;
          display: flex;
          justify-content: space-between;
          :first-child{
            color: var(--td-success-color);
          }
          :last-child{
            color: var(--td-brand-color);
          }
        }

        .desc {
          height: 80px;
          overflow: auto;
        }
      }

      .footer {
        height: 30px;
      }
    }
  }
}
</style>
